<script  setup>
// 导入所需的
import { ref,onMounted } from 'vue';
import axios from 'axios';
import {
    Delete,
    Search,
    Baseball, EditPen, Plus, Refresh

} from '@element-plus/icons-vue'
const input = ref('')
const value2 = ref('')

const list = ref([])
const total = ref(0)
const current =ref(1)
const size = ref(10)
const name =ref('')
const show = async ()=>{
  let res = await axios({
    url:"http://localhost:8080/loginLog",
    params:{
      current:current.value,
      size:size.value,
      name:name.value
    }
  })
  list.value = res.data.data.records
  total.value = res.data.data.pages
}
onMounted(()=>{
  show()
})

const handleCurrentChange = (pageN)=>{
    current.value = pageN
    show()
}


</script>
<template>

    <div class="big">
        <div class="shang">
            <div class="shang1">
                <div class="block">
                登入用户 <el-input v-model="input" style="width: 300px" placeholder="角色名称 " />
                操作时间
              
                    <el-date-picker v-model="value2" type="datetimerange" start-placeholder="开始时间"
                        end-placeholder="结束时间" format="YYYY-MM-DD HH:mm:ss" date-format="YYYY/MM/DD ddd"
                        time-format="A hh:mm:ss" />
                </div>
            </div>
            <div class="shang2">
                <el-button :icon="Search" type="primary">搜索</el-button>
                <el-button><el-icon>
                        <Refresh />
                    </el-icon>重置</el-button>
            </div>
        </div>



        <div>
            <el-table :data="list" border style="width: 100%">
                <el-table-column prop="id" label="序号" width="180" />
                <el-table-column prop="username" label="登录账号" width="180" />
                <el-table-column prop="ipaddr" label="登入ip地址" />
                <el-table-column prop="status" label="状态" />
                <el-table-column prop="msg" label="提示信息" />
                <el-table-column prop="create_time" label="创建时间" />
            </el-table>
        </div>
    </div>
    <el-pagination background layout="prev, pager, next" :page-count="total" @current-change="handleCurrentChange" />

</template>
<style scoped>
.biga {
    padding: 0;
    margin: 0;
    height: 100vh;
    width: 100vw;
}

.shang {
    border: 1px solid rgb(206, 206, 206);
    margin-bottom: 10px;
}

.shang1 {
    margin-top: 10px;
    margin-left: 10px;
}

.shang2 {
    margin-top: 10px;
    margin-left: 10px;
    margin-bottom: 10px;
}
.block {
  padding: 0px 0;

}
</style>